<template>
	<view class="index" :class="[nodata ? '' : 'index2']">
		<view class="jtop">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<view class="jtop_l" @tap="navigateBack"><image src="../../static/img/ic_back.png"></image></view>
			<!-- <view class="jtop_l" @tap="navigateBack">关闭</view> -->
			<view class="jtop_c">机械</view>
			<view class="jtop_r" @tap="btTC2"><image src="../../static/img/index/new/ic_ellipsis.png"></image></view>
			<!-- <view class="jtop_r" ><image src="../../static/img/index/new/search.png"></image></view> -->
		</view>
		<view class="tophr"></view>
<!-- 		<uni-search-bar placeholder="搜索" @confirm="search" class="ss" bgColor="rgb(242,242,242)"></uni-search-bar>
 -->		
		
	
		
		
		
		<!-- <view class="ci">
			<view class="ci_b">
				<view class="ci_bt">
					今日应付总额(元)
				</view>
				<view class="ci_bf">
					{{data_one}}
				</view>
			</view>
			<view class="ci_b">
				<view class="ci_bt">
					今日已付总额(元)
				</view>
				<view class="ci_bf">
					{{data_two}}
				</view>
			</view>
			<view class="ci_b">
				<view class="ci_bt">
					今日未付总额(元)
				</view>
				<view class="ci_bf">
					{{data_three}}
				</view>
			</view>
		</view>
		 -->
		<!-- 无内容 -->
		<view class="no"  v-if="!nodata">
			<view class="no_t">
				<image src="../../static/img/index/5/xx3.png"></image>
			</view>
			<view class="no_c">
				暂无机械结算
			</view>
			<view class="no_f" @tap="tp_add">
				新建机械
			</view>
		</view>
		
		
		
		<view class="cli"  v-if="nodata">
			
			
			<view class="clb" @tap="to_edit(index,item.id)" v-for="(item, index) in items" :key="item.id" @longpress="touchstart(index,item.id)">
				<!-- <image src="../../static/img/index/2/mr.png"></image> -->
				<view class="clb_t">
					<view class="clfb_tt">
						{{item.owner}} ({{item.name}})
						<span>{{item.updateTime}}更新</span>
					</view>
					<view class="clfb_tf">
						应付: {{item.totalAmount?item.totalAmount:'0.00'}}元    已付: {{item.payedAmount?item.payedAmount:'0.00'}}元
					</view>
				</view>
				<image src="../../static/img/jt.png" class="blb_r"></image>
			</view>
			
			<!-- <view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_mugong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						木工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view>
			
			<view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_mohuigong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						抹灰工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view>
			
			<view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_qizhugong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						砌筑工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view>
			
			<view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_hunlintugong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						混凝土工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view>
			
			
			
			
			
			<view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_shuidiangong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						水电工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view>
			
			<view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_jiazigong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						架子工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view>
			
			<view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_youqigong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						油漆工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view>
			
			<view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_fangshuigong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						防水工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view>
			
			<view class="clb" @tap="to_edit">
				<image src="../../static/img/index/new/gz/ic_linggong.png"></image>
				<view class="clb_t">
					<view class="clfb_tt">
						零工
					</view>
					<view class="clfb_tf">
						支出：4000
					</view>
				</view>
			</view> -->
			
			<image src="../../static/img/index/5/xx2.png" class="xx2" @click="tp_add"></image>
		</view>
		
	
	
	
	
	
	
	
	
		<!-- 弹出层 -->
			<view :class="[ashowpop ? 'tc' : 'tc hide']">
				<view class="jtop_bj"  @click="jshow_pop"></view>
				
				<view  :class="[ashowpop_lb ? 'tc_fbox' : 'tc_fbox hide']">
					<!-- <view class="tc_fbox_bt3" @click="build_e">
						新增包工工组
					</view> -->
					<view class="tc_fbox_bt2" @click="tp_add">
						新增机械
					</view>
					<view class="tc_fbox_bt2" @click="jshow_pop">
						汇总表格导出
					</view>
					<view class="tc_fbox_bt"  @click="jshow_pop">
						取消
					</view>
				</view>
				
				
				
				
				
				
				
		
			</view>
		
	</view>
</template>

<script>import request from '@/common/request.js'
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
		    return {
				repeat_click:true,
		        ashowpop: false,
				ashowpop_jrename: false,
				ashowpop_jdel: false,
				ashowpop_jfolder: false,
				ashowpop_lb: false,
				ashowpopT: false,
				bj: false,
				yd:false,
				
				
				data_one:"0",
				data_two:"0",
				data_three:"0",
				
				nodata:true,
				items:[],
				name:"",
				cf:true
		    }
		},
		
		onShow() {
			this.data_add(1);		
		},
		
		methods: {
			
			// 长按删除		
touchstart(index,a) {
　　let that = this;
　
　　　　　　uni.showModal({
　　　　　　　　title: '删除',
　　　　　　　　content: '确定要删除吗？',
				success: function (res) {
						if (res.confirm) {
						request({
							url: `/biz/machinery/${a}`, 
							method :"DELETE",
							
							success: (res) => {
								if (res.data.success == true) {
									that.data_add(1);
									wx.showToast({
									    title: '删除成功',
									    icon: 'none',
									    duration: 1500,
									    success: function () {
									      setTimeout(function() {
											//   uni.navigateBack()
									      }, 2000);
									    }
									});
								} else {
									// 错误
														this.repeat_click = true;
					uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							},
							fail: () => {
													this.repeat_click = true;
					uni.showToast({
									title: '服务器开小差，请稍后~',
									icon: 'none'
								});
								return false;
							}
						});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
				}
　　　　});
},
			onKeyInput_o: function(event) {
				this.name=event.detail.value;
			},
			
			jsave(){
				if(!this.repeat_click){
					return
				}
				this.repeat_click = false;
				
				if(!this.cf){
					return false;
				}
				this.cf = false;
				
				if(!this.name){
					this.repeat_click = true;
					uni.showToast({
						title: '请输入工种名称',
						icon: 'none'
					})
					return false;
				}
				
			
				
					var jd =  {
						name:this.name
					};
					
					
			
			
				request({
					url: `/biz/machinery/list`,
					data:jd,
					
					method: 'POST',
					success: openIdRes => {
						
						console.log(openIdRes);
						if (openIdRes.data.success == true) {
							var that = this;
							that.data_add(1);
							wx.showToast({
							    title: '添加成功',
							    icon: 'none',
							    duration: 1000,
							    success: function () {
							      setTimeout(function() {
									  that.ashowpop = !that.ashowpop;
									  that.ashowpop_lb = false;
									  that.ashowpop_jfolder = false;
									  this.cf = true;
							      }, 500);
							    }
							});
							
							
							// uni.navigateBack()
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: openIdRes.data.msg,
								icon: 'none'
							});
							this.isLoading = false;
							this.cf = true;
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						this.cf = true;
						return false;
					}
				});
				
						
			},
			
			
			data_add(a){
				this.name = "";
				 this.cf = true;
				this.projectId = uni.getStorageSync("dqfull_name").id;
				
				
		
				request({
					url: `/biz/machinery/list`, 
					method :"GET",
					// data:{
					// 	category:a
					// },
					
					success: (res) => {
						console.log("2项目列表信息",res)
						console.log(res.data.data.length)
						
						
						if (res.data.success == true) {
								if(res.data.data.length > 0){
									this.items = res.data.data;
									console.log(this.items);
									this.nodata = true;
								}else{
									this.items = "";
									this.nodata = false;
								}
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
						
			},
			
			build_e(){
				this.ashowpop_lb = false;
				this.ashowpop_jfolder = true;
			},
			to_rl() {
				uni.navigateTo({
					url: '../main/close',
				});
			},
			to_edit(a,b) {
				uni.setStorageSync("temp_data",this.items[a])
				
				uni.navigateTo({
					url: '../main/mac_list',
				});
			},
			
			tp_add(){
				uni.navigateTo({
					url: '../main/mac_more',
				});
			},
			
			// 跳转
			jshow_pop() {
					this.ashowpop = !this.ashowpop;
					this.ashowpop_lb = false;
					this.ashowpop_jfolder = false;
			},
			
			btTC2(){
					this.ashowpop = !this.ashowpop;
					this.ashowpop_lb = true;
					this.ashowpop_jfolder = false;
			},
			
			
		
			navigateBack(){
				uni.navigateBack()
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
	}
</script>

<style>
.tc{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:10000; display: block;}
.jtop_bj{width: 100%; height: 100%; background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; z-index:10000;}
.tc_fbox_bt{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 20rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox{ width: 100%; height: auto; display: block; float: left; background: #F2F2F2; position: fixed; left: 0; bottom: 0; z-index:10001; }
.tc_fbox_bt2{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 0rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox_bt3{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-bottom: 1px solid #DDDDDD; background: #ffffff;}


.no{width: 100%;height: auto; display: block;float: left;margin: 400rpx 0 0;}
.no_t{width: 200rpx;height: 200rpx; display: block;float: left;margin:0 275rpx; background: #ffffff; border-radius: 200rpx;}
.no_t image{width: 140rpx;height: 140rpx; display: block;float: left;margin: 30rpx;}
.no_c{width: 100%;height: auto; display: block;float: left;margin: 30rpx 0 50rpx;color: #666666;font-size: 32rpx;line-height: 40rpx; text-align: center;}
.no_f{width: 460rpx;
height: 94rpx; line-height: 94rpx; background: #256AFF;
border-radius: 10rpx; display: block;float: left;margin: 0 145rpx;color: #ffffff;font-size: 36rpx; text-align: center;}
.no_f:active{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.199437), rgba(0, 0, 0, 0.199437)), #256AFF;}


	
	
.tophr{ width: 100%; height: 88rpx; }
.uni-searchbar{box-shadow:none}

.ci{width: 690rpx;height: 180rpx;background: #256AFF;box-shadow: 0px 20rpx 30rpx rgba(0, 0, 0, 0.100333);border-radius: 12rpx; margin: 30rpx;}
.ci_b{width: 33%;height: 72rpx; display: block; float: left; box-sizing: border-box; margin: 57rpx 0 0 0; border-right: 1px solid rgba(255,255,255,.3);}
.ci_bt{ width: 100%; height: auto; color: #FFFFFF;font-size: 20rpx;line-height: 28rpx;display: block;float: left; margin: 0rpx 0 0rpx 0; text-align: center; }
.ci_bf{ width: 100%; height: auto; color: #FFFFFF;font-size: 32rpx;line-height: 32rpx;display: block;float: left; margin: 20rpx 0 0rpx 0; text-align: center; }
.ci .ci_b:last-child{border: 0;}



.cli{ width: 100%; height: auto; display: block; float: left; }
.clb{ width: 720rpx; height: auto; display: block; float: right; border-bottom: 1px solid #DDDDDD; margin: 18rpx 0 0 0; }
.clb image{width: 84rpx;height: 84rpx;display: block;float: left; margin:0rpx 20rpx 18rpx 0rpx;}
.clb_t{ width: 660rpx; height: auto; display: block; float: left; margin-bottom: 15rpx; }
.clfb_tt{ width: 100%; height: auto; color: #000000;font-size: 34rpx;line-height: 42rpx;display: block;float: left; margin: 0 0 0rpx 0; }
.clfb_tt span{ width: auto; height: auto; color: #CCCCCC;font-size: 24rpx;line-height: 42rpx;display: block;float: right; margin: 0 0 10rpx 0; }
.clfb_tf{ width: 100%; height: auto; color: #999999;font-size: 24rpx;line-height: 32rpx;display: block;float: left;  }



.no{width: 100%;height: auto; display: block;float: left;margin: 400rpx 0 0;}
.no_t{width: 200rpx;height: 200rpx; display: block;float: left;margin:0 275rpx; background: #ffffff; border-radius: 200rpx;}
.no_t image{width: 140rpx;height: 140rpx; display: block;float: left;margin: 30rpx;}
.no_c{width: 100%;height: auto; display: block;float: left;margin: 30rpx 0 50rpx;color: #666666;font-size: 32rpx;line-height: 40rpx; text-align: center;}
.no_f{width: 460rpx;
height: 94rpx; line-height: 94rpx; background: #256AFF;
border-radius: 10rpx; display: block;float: left;margin: 0 145rpx;color: #ffffff;font-size: 36rpx; text-align: center;}
.no_f:active{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.199437), rgba(0, 0, 0, 0.199437)), #256AFF;}



.doc_bs{width: 100%; height: auto; display: block;float: left;background: #ffffff; }
.doc_b{width: 720rpx; height: auto; display: block;float: left;background: #ffffff; border-bottom:1px solid #DDDDDD; margin: 0 0 0 30rpx; }
/* .doc_bs .doc_b:last-child{ border: 0;} */
.doc_bl{width: 48rpx; height:48rpx; display: block;float: left;margin: 36rpx 30rpx 36rpx 0; }
.doc_bt{width: auto; height: 42rpx; line-height: 42rpx;font-size: 34rpx; display: block;float: left;color: #000000; margin: 37rpx 0 0 0; }
.doc_br{width: 48rpx; height: 48rpx; display: block;float: right;margin:32rpx 30rpx 32rpx 0; }
.doc_b2{width: 600rpx; height: auto;  display: block;float: left;}
.doc_b2t{width: 600rpx; height: auto;font-size: 34rpx;line-height: 42rpx;color: #000000; margin: 18rpx 0 10rpx;  display: block;float: left;}
.doc_b2f{width: 600rpx; height: auto;font-size: 24rpx;line-height: 32rpx;color: #FC9422; margin: 0rpx 0 rpx;  display: block;float: left;}


.index{background: #ffffff;width: 100%; height: auto;}
.index2{background: #F2F2F2;width: 100%; height: auto;}
.jtop{ width: 100%; height: 88rpx; background: #ffffff; position: fixed; top: 0; left: 0; z-index: 1000;box-shadow: inset 0px -1px 0px #DDDDDD;}
.jtop_l{width: auto; height: 88rpx; display: block;float: left; font-size: 32rpx; color: #000000; line-height: 88rpx; margin: 0 0 0 30rpx;}
.jtop_l image{width: 48rpx; height: 48rpx; display: block;float: left; margin: 20rpx 0 20rpx 0;}
.jtop_lt{margin: 0 0 0 10rpx;}
.jtop_r{width: 48rpx; height: 48rpx; display: block;float: right; margin: 20rpx 20rpx 0 0;}
.jtop_rl{margin: 20rpx 30rpx 0 0;}
.jtop_r image{width: 48rpx; height: 48rpx; display: block;float: left;}
.jtop_c{width: 70%; height: 48rpx; line-height: 48rpx; display: block;float: left; position: fixed; top: 20rpx; left: 15%; text-align: center; font-size: 36rpx;color: #000000;}
.jtop_c image{width: 36rpx; height: 36rpx; display: inline-block; float: none; margin-bottom: -5rpx; margin-left: 5rpx;}
.jtop_b{width: 100%; height: auto; background: #ffffff; position: fixed; top:88rpx; left: 0; z-index: 1001;}

.doc_b22{ opacity: .5;}

.nd{width: 735rpx; height: auto; display: block;float: left;margin: 0 0 0 0rpx; }
.nd_bt{ width: auto; height: 48rpx; display: block;float: right; border: 1px solid #DDDDDD; border-radius: 24rpx; margin: 40rpx 0 40rpx 30rpx;}
.nd_bt text{width: auto; height: 48rpx; display: block;float: left; margin: 0 7rpx 0 18rpx; line-height: 48rpx; color: #666666; font-size: 24rpx; }
.nd_bt image{width: 13rpx; height: 8rpx; display: block; float: left;  margin: 21rpx 14rpx 0 0;}




.tc_box{width: 540rpx;height: auto;background: #FFFFFF;border-radius: 14rpx; margin: 460rpx 105rpx 0; position: relative;z-index:10001; overflow: hidden;}
.tc_boxt{width: 100%; height: 44rpx; font-size: 36rpx;line-height: 44rpx;display: block;float: left; text-align: center; margin: 40rpx 0 20rpx; color: #000000;}
.tc_boxtc{width: 100%; height: 36rpx; font-size: 28rpx;line-height:36rpx;display: block;float: left; text-align: center; margin: 0rpx 0 30rpx; color: #666666;}
.tc_boxi{width:460rpx;height: 88rpx;background: #FFFFFF;border-radius: 8rpx;border: 1px solid #DDDDDD;display: block;float: left; margin: 0rpx 40rpx 22rpx 40rpx; }
.tc_boxi input{width:70%;height: 48rpx; margin: 20rpx 5%; font-size: 32rpx; color: #000000; float: left;}
.tc_boxi image{width: 36rpx; height: 36rpx; display: block;float: right; margin: 26rpx 20rpx 0rpx 0; }
.tc_f{width: 100%; height: 100rpx;display: block;float: left;  border-top: 1px solid #DCDEE3; margin: 20rpx 0 0; }
.tc_fl{width: 269rpx; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 36rpx; color: #256AFF;  display: block;float: left;  border-right: 1px solid #DCDEE3; }
.tc_fr{width: 269rpx; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 36rpx; color: #256AFF;  display: block;float: left;   }
.tc_fr2{width: 269rpx; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 36rpx; color: #EB5342;  display: block;float: left;  }



.tc_fbox{ width: 100%; height: auto; display: block; float: left; background: #ffffff; position: fixed; left: 0; bottom: 0; z-index:10001; }
.tc_fboxs{ width: 100%; height: auto; display: block; float: left;}
.tc_fbox_ic{ width:33.3333%; display: block; float: left; text-align: center; font-size: 28rpx; color: #666666;}
.tc_fbox_ic image{width: 72rpx; height: 72rpx; display: block;float: none; margin: 60rpx auto 24rpx;}
.tc_fbox_ic text{width: 100%; height: auto; display: block;float: none; margin: 0 auto 64rpx;}
.tc_fbox_bt{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 20rpx solid #F2F2F2;}

.tc_list{width: 100%; height: auto; display: block; float: left; background: #ffffff;}
.tc_list_t{width: 100%; height: 80rpx; display: block; float: left; background: #ffffff; font-size: 24rpx; color: #999999; line-height: 80rpx; margin: 0rpx 0; border-bottom: 1px solid #DDDDDD; text-align: center;}
.tc_list{ width: 100%; height: auto; display: block; float: left; border-bottom: 1px solid #DDDDDD;}
.tc_list1{width:auto; height: auto; display: block; float: left;  font-size: 36rpx; color: #000000; line-height: 44rpx; margin: 34rpx 28rpx 38rpx 30rpx; }
.tc_listtwo{width:auto; height: auto; display: block; float: left;  font-size: 28rpx; color: #999999; line-height: 36rpx; margin: 42rpx 0rpx 0rpx 0rpx; }
.tc_list image{width: 48rpx; height: 48rpx; display: block;float: right; margin:36rpx  30rpx 0 0;}


.clb image.blb_r{width: 16rpx;height: 25rpx;display: block;float: right; margin: 30rpx 30rpx 0 0rpx;}


.xx2{ width: 180rpx; height: 180rpx; display: block; float: left; position: fixed; right: 20rpx; bottom: 20rpx; z-index: 9999;}
</style>